<template>
    <div class="content">
    <!-- 数据查询 -->
    <div class="filter-container">
      <el-input
          placeholder="请输入用户名"
          prefix-icon="el-icon-search"
          v-model="listQuery.name"
          @input = "getData()">
      </el-input>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>

      <el-table-column
        prop="account"
        label="用户名"
        width="180">
      </el-table-column>

      <el-table-column
        prop="password"
        label="密码"
        width="180">
      </el-table-column>

      <el-table-column
        prop="reg_time"
        sortable
        label="创建时间">
        <template slot-scope="{row}">
          <span>{{row.reg_time | getDate }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="role_name"
        label="权限分配"
        width="180">
        <template slot-scope="{row}">
          {{row.role_name | getRole}}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="danger"
            @click="handleDel(row)" >删除</el-button>
        </template>
      </el-table-column>

    </el-table>

  <!-- 删除弹框 -->
    <el-dialog title="权限管理-删除" :visible.sync="dialogDelVisible">
      <p>确定删除？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDelVisible = false">取 消</el-button>
        <el-button type="primary" @click="delData()">删 除</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <my-pagination v-show="rows>0"
      :total ="rows"
      :page.sync ="listQuery.pageNo"
      :pageSize.sync ="listQuery.pageSize"
      @change = "getData"/>
  </div>
</template>

<script>
import {permissionList,permissionRemoveUser} from "@/api/http"

export default {
  data(){
    return {
      tableData:[],
      rows:1, //总数目
      listQuery:{
        pageNo:1,
        pageSize:10,
        name:""
      },
      them:{},
      dialogDelVisible:false, //弹框状态
    }
  },
  filters:{
    getRole(type){
      switch(type){
        case 'input':
          return '员工';
        case 'approve':
          return '审批管理员';
        default:
          return type;
      }
    }
  },
  mounted(){
    this.getData();
  },
  methods:{
    getData(){
      permissionList(this.listQuery).then(res=>{
        let {code,data} = res.data;
        if(code == 20000){
          this.tableData = data.list;
          this.rows = data.rows;
        }
      })
    },
    //弹框显示
    handleDel(row){
      this.temp = {...row};
      this.dialogDelVisible = true;
    },
    delData(){
      permissionRemoveUser(this.temp.id).then(res=>{
        let {code,data} = res.data;
        if(code==20000){
          this.dialogDelVisible = false; //删除弹框的状态
          this.getData(); //数据查询
          this.$notify({
            title: '删除',
            message: '删除成功',
            duration: 2000,
            type: 'success'
          });
        }
      })
    }
  }
}
</script>


